<template>
  <transition name="fade">
    <div class="food" v-show="showFlag" ref="foodwrapper">
        <div class="food-content">
            <div class="food-img">
              <img :src="food.image"  alt="">
              <div class="back" @click="hide">
                <i class="icon-arrow_lift"></i>
              </div>
            </div>
          <div class="food-info">
            <div class="name">{{food.name}}</div>
            <div class="detail">
              <span class="sell-count">月售{{food.sellCount}}份</span>
              <span class="rating">好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{food.price}}</span>
              <s class="old" v-show="food.rating">￥{{food.rating}}</s>
            </div>
            <div class="carcontrol-wrapper">
              <carcontrol :food="food"></carcontrol>
            </div>
            <transition name="pass">
              <el-button @click.stop.prevent="addFirst" v-show="!food.count || food.count===0" class="btn" type="primary">加入购物车</el-button>
            </transition>
          </div>
          <split v-if="food.info"></split>
          <div class="info" v-if="food.info">
            <h1 class="title">商品信息</h1>
            <p class="text">{{food.info}}</p>
          </div>
          <split></split>
          <div class="rating">
            <h1 class="title">商品评价</h1>
            <ratingselect @select="ratingSelect" @toggle="toggleContent" :ratings="food.ratings"
              :selectType="selectType" :onlyContent="onlyContent" :desc="desc"></ratingselect>

            <div class="rating-wrapper">
              <ul v-show="food.ratings && food.ratings.length">
                <li v-for="rating in food.ratings" class="ratings-item">
                    <div class="rating-top">
                      <span class="time">{{rating.rateTime | formatDate}}</span>
                      <div class="user-wrapper">
                        <span class="user">{{rating.username}}</span>
                        <img class="avatar" width="12" height="12" :src="rating.avatar">
                      </div>
                    </div>
                  <div class="ratings-content">
                    <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
                    <span>{{rating.text}}</span>
                  </div>
                </li>
              </ul>
              <div class="noratings" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
            </div>
            </div>
        </div>
    </div>
  </transition>
</template>

<script>
  import { MessageBox } from 'element-ui';
  import { Notification } from 'element-ui';
  import Vue from 'vue';
  import alert from 'vue-strap/src/alert'
  import carcontrol from '../carcontrol/carcontrol.vue'
  import split from '../split/split.vue'
  import BScroll from 'better-scroll';
  import ratingselect from '../ratingselect/ratingselect.vue'
  import {formatDate} from '../../common/js/data'
  const POSTTIVE = 0;
  const NEGATIVE = 1;
  const ALL = 2;

  export default{

    components:{
      carcontrol,
      split,
      ratingselect

    },
    props: {
      food: {
        type: Object
      }
    },
    data() {
      return {
        showFlag: false,
        selectType: ALL,
        onlyContent: true,
        desc: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
    methods:{
      show(){
            this.showFlag=true;
            this.$nextTick(()=>{
                if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.foodwrapper,{
                        click:true
                    })
                }else{
                    this.scroll.refresh();
                }
            })
        },
      hide(){
            this.showFlag=false
      },
      addFirst(){

            Vue.set(this.food, 'count', 1);

      },
      ratingSelect(type){
          this.selectType=type
      },
      toggleContent(){
          this.onlyContent=!this.onlyContent;
          this.$nextTick(()=>{
            this.scroll.refresh();
          })

      }
    },
    created(){
//      console.log(this.food.image);
    }
  }
</script>

<style lang="scss">
  .food {
    position: fixed;
    top: 0;
    bottom: 48px;
    overflow: hidden;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    transform: translate3d(0, 0, 0);
    &.fade-enter-active, &.fade-leave-active{
      transition: all 0.4s linear;
                          }
                          &.fade-enter, &.fade-leave-to{
    transform: translate3d(100%,0,0);
                                         }


    .food-content{

        .food-img{
          position: relative;
          width: 100%;
          height: 0;
          padding-top: 100%;
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;

          }
          .back {
            position: absolute;
            top: 10px;
            left: 0;
          .icon-arrow_lift{
            display: block;
            padding: 10px;
            font-size: 20px;
            color: #fff;
          }

          }

        }
        .food-info{
          padding: 18px;
          position: relative;

        .name{
            font-size: 14px;
            font-weight:700;
            color: rgb(7,17,27);
            line-height: 28px;
          }
          .detail{
            font-size: 10px;
            color: rgb(147,153,159);
            line-height: 10px;
          margin-top:8px;
            .sell-count{
              margin-right: 12px;
            }
          }
          .price{
            font-size: 14px;
            font-weight:700;
            color: rgb(240,20,20);
            line-height: 24px;
            margin-top:18px;
            .old{
              font-size: 10px;
              font-weight:200;
              color: rgb(147,153,159);

            }
          }
          .carcontrol-wrapper{
            position: absolute;
            bottom: 18px;
            right: 18px;
          }
          .btn{
            border-radius: 24px;
            position: absolute;
            bottom: 18px;
            right: 18px;
            &.pass-enter-active ,&.pass-leave-active{
               transition: all 0.3s
              }
             &.pass-enter,&.pass-leave-to{
             opacity: 0;
             z-index: -1;
            }
          }
        }
        .info{
          padding: 18px;
          .title{
            font-size: 14px;
          }
          .text{
            margin-top: 6px;
            font-size: 12px;
            font-weight:200;
            color: rgb(77,85,93);
            line-height: 24px;
          }
        }
        .rating{
          padding: 18px;
         .title{
           margin-bottom: 12px;
         }
         .rating-wrapper{

           .ratings-item{
             margin-top: 16px;

             padding-bottom:16px;
             border-bottom:1px solid rgba(7,17,27,.1);
             .rating-top{
               .time{
                 font-size: 10px;
                 color: rgb(147,153,159);
                 line-height: 12px;
               }
               .user-wrapper{
                 float: right;
                 font-size: 10px;
                 color: rgb(147,153,159);
                 line-height: 12px;
                  .user{
                    vertical-align: middle;
                  }
                 .avatar{
                   border-radius: 50%;
                   vertical-align: middle;
                 }
               }
             }
            .ratings-content{
              margin-top:6px;
              font-size:12px;
              color: rgb(7,17,27);
              line-height: 16px;
              margin-left:4px;
            .icon-thumb_up {
              color: rgb(0, 160, 220);
            }
            .icon-thumb_down{
            color: rgb(147, 153, 159);
            }
            }
           }
         }
        }
    }
  }
</style>
